.dropdown-container {
  @import 'node_modules/react-select/scss/default';
  flex-grow: 1;

  &:not(:last-child) {
    margin-bottom: var(--spacing-quarter-unit);
  }

  .Select {
    &.is-focused {
      & > .Select-control {
        background-color: var(--color-background-inputs);
        .Select-input {
          background-color: var(--color-background-inputs) !important;
        }
      }
    }
    &.is-open {
      & > .Select-control {
        border-color: var(--color-border-dark);
        background-color: var(--color-background-inputs) !important;
        .Select-input {
          background-color: var(--color-background-inputs) !important;
        }
      }
    }
    &:not(.is-open) {
      .Select-control {
        background-color: var(--color-background-inputs) !important;
        &:hover {
          border-color: var(--color-border-dark);
          .Select-arrow {
            opacity: 1;
          }
        }
      }
    }

    &-control {
      background-color: var(--color-background-inputs);
      border: var(--border-default);
      box-shadow: none !important;
      color: var(--color-text-base);
    }
    &-option {
      color: var(--color-text-base);
    }
    &-menu-outer {
      border: var(--border-default);
      border-top-color: var(--color-border-default);
      background-color: transparent;
      box-shadow: var(--box-shadow-base);
    }
  }
  .Select.is-focused:not(.is-open) > .Select-control {
    border-color: var(--color-border-accent);
  }
  .Select.has-value.Select--single
    > .Select-control
    .Select-value
    .Select-value-label,
  .Select.has-value.is-pseudo-focused.Select--single
    > .Select-control
    .Select-value
    .Select-value-label {
    color: var(--color-text-base);
  }
  .Select.is-open .Select-arrow,
  .editor_controls
    .dropdown-container
    .Select
    .Select-arrow-zone:hover
    > .Select-arrow {
    border-color: transparent transparent var(--color-border-accent) !important;
  }

  .Select-arrow-zone:hover {
    .Select-arrow {
      border-top-color: var(--color-border-accent) !important;
    }
  }
  .Select-arrow {
    border-color: var(--color-border-default) transparent transparent;
  }

  .Select-option {
    background-color: var(--color-background-inputs);
    &.is-selected {
      color: var(--color-text-active);
      font-weight: var(--font-weight-semibold);
      background-color: var(--color-background-light);
    }
    &.is-focused {
      background-color: var(--color-background-light);
      color: var(--color-text-active);
    }
  }
  .Select-option:hover {
    color: var(--color-text-active);
    background-color: var(--color-background-light);
  }

  .Select-placeholder,
  .Select--single > .Select-control .Select-value {
    color: var(--color-text-base);
  }
  .Select-value-label {
    color: var(--color-text-base) !important;
  }
  .Select-placeholder {
    color: var(--color-text-placeholder);
  }
  .dropdown--dark {
    .Select {
      &-control {
        background-color: var(--color-background-inverse);
      }
      &-option {
        background-color: var(--color-background-inverse);
        &.is-selected {
          background-color: var(--color-border-default);
        }
      }
      &.is-focused {
        background-color: var(--color-border-light);
      }
    }
  }
}
